<template>
		<view class="wrapper">
		        <view class="title">1. 基础进度条 (percent="50")</view>
		        <view class="box">
		            <progress percent="50" show-info="true"></progress>
		        </view>
		        
		        <view class="title">2. 自定义样式</view>
		        <view class="box">
		            <progress percent="80" stroke-width="12" activeColor="#4cd964"></progress>
		        </view>
		
		        <view class="title">3. 动态进度条 (数据绑定)</view>
		        <view class="box">
		            <progress :percent="dynamicPercent" show-info="true" activeColor="#007aff"></progress>
		            <button size="mini" @click="startLoading" style="margin-top: 15px;">开始加载</button>
		            <button size="mini" @click="stopLoading" style="margin-left: 10px;">停止加载</button>
		        </view>
		    </view>
</template>

<script>
	export default {
	        data() {
	            return {
	                dynamicPercent: 0,
	                // 用于存放定时器
	                timer: null 
	            }
	        },
	        methods: {
	            startLoading() {
	                // 先重置
	                this.dynamicPercent = 0;
	                
	                // 先清除可能存在的旧定时器，防止加速
	                if (this.timer) {
	                    clearInterval(this.timer);
	                }
	                
	                // 创建新定时器
	                this.timer = setInterval(() => {
	                    if (this.dynamicPercent >= 100) {
	                        // 满了就停止
	                        clearInterval(this.timer);
	                        this.timer = null;
	                    } else {
	                        this.dynamicPercent += 5;
	                    }
	                }, 200); // 每200毫秒加5%
	            },
	            stopLoading() {
	                if (this.timer) {
	                    clearInterval(this.timer);
	                    this.timer = null;
	                }
	            }
	        },
	        // 页面卸载时（例如返回上一页），自动清除定时器，防止内存泄漏
	        onUnload() {
	            this.stopLoading();
	        }
	    }
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    margin-top: 10px;
}
.box {
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
}
/* progress 在 button 上方加点间距 */
progress {
    margin-bottom: 10px;
}
</style>
